arc(x, y, radius, startAngle, endAngle, anticlockwise) | 绘图中心点在( x,y )的弧,半径为 radius ,角度在 startAngle 和 endAngle (单位是弧度)之间。最后一个参数 anticlockwise 是布尔类型,表示 tartAngle 和 endAngle 是逆时针方向计算还是顺时针方向计算, true 表示顺时针 |
arcTo(x1, y1, x2, y2, radius) | 由上一个点到( x1, y1 )及( x1,y1 )到( x2, y2 )线组成的内切弧, radius 表示半径 |
beginPath() | 开始一条路径,或重置当前路径 |
bezierCurveTo(cpx1,cpy1c , px2,cpy2,x,y) | 有上一个点到 (cpx1,xpy1) 及 (px2,py2) 到 (x,y) 绘制的一条神奇曲线 |
clearRect() | 清除指定区域的所有绘制图形,显示画布背景颜色 |
closePath() | 关闭路径 |
clip() | 使用计算所有的子路径而建立新的剪切区域,未闭合的子路径在填充时按照闭合方式填充,但并不影响实际的子路径集合,新的剪切区域将替换当前的剪切区域 |
closePath() | 创建当前点到开始点路径,相当于闭合路径操作。 |
fill() | 使用 fillStyle 方式填充一个子路径,未闭合的子路径在填充时按照闭合方式填充,但是不影响实际的子路径集合 |
fillRect(x,y,width,height) | 该方法绘制填充矩形 |
lineTo(x, y) | 绘制线条到指定的目标坐标( x, y ),且在两个坐标之间画一条直线 |
moveTo(x, y) | 只是将光标移动到新点( x, y ),并且将该点作为线条的开始点,但是并不绘制 |
quadraticCurveTo(cpx,xpy,x,y) | 由上一个点到( cpx,cpy )及 (cpx,cpy) 到 (x,y) 的线组成的不规则曲线 |
rotate(angle) | 以原点为中心旋转 canvas 上下对象的坐标空间。参数为弧度,转化为度数 (degrees)*Math.PI/180 |
rect(x, y, width, height) | 在点( x, y )绘制一个长 width 和宽 height 的矩形,它与 fillRect() 方法和 strokeRect() 方法不一样的是,这个函数创建一个路径而不是单独的形状。 |
scale(x,y) | 缩放 canvas 当前绘图。使其变大或变小 |
setTransform(a,b,c,d,e,f) | 使用矩阵变幻绘图 |
stroke() | 使用 lineWidth 、 lineCap 、 lineJoin 和 strokeStyle 对所有的子路径进行填充 |
strokeRect(x,y,width,height) | 该方法绘制矩形,不填充 |
transform(a,b,c,d,e,f) | 使用矩阵变换图形 |
closePath() 方法表示关闭路径,该方法不强调一定要使用。如果不关闭路径,已经创建的路径会永远保留着,就算用 fill() 方法与 stroke() 方法在页面中将图形已经绘制完毕,路径都不会消失。
stroke() 方法在对子路径进行填充时会使用到一些属性,这些属性的说明如下。| fillStyle | 设置为 CSS 颜色、一个图案或一种颜色渐变 |
| lineCap ( butt ) | 指定线条末端的样式。默认值,每根线的头和尾都是长方形,不做任何处理 |
| lineCap ( square ) | 指定线条末端的样式。每根线的头和尾都增加一个长方形,长度为线宽一半,高度为线宽 |
| lineCap ( round ) | 指定线条末端的样式。每根线的头和尾都增加一个半圆形的箭头 |
| lineJoin(round) | 修改当前形状中线段的连接方式,让拐角变得更圆滑 |
| lineJoin(bevel) | 修改当前形状中线段的连接方式,让拐角变成正三角 |
| lineJoin(miter) | 修改当前形状中线段的连接方式,默认为直角 |
| lineWidth | 线条宽度设置 |
| miterLimit | 设置或返回最大斜接长度。其作用是为斜面的长度设置一个上限,默认为 10 。如果 lineJoin 属性值为 round 或 bevel 时, miterLimit 属性无效 |
| strokeStyle | 设定图形边框的样式,如设置边框的颜色 |
| createLinearGradient(x0,y0,x1,y1) | 使用该方法创建 canvasGradient 对象,参数对应起始点 |
| createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") | 创建一个 pattern 对象,并将其赋给 fillStyle 属性或 strokeStyle 属性 |
| createRadialGradient(x1,y1,r1,x2,y2,r2) | 使用该方法创建 canvasGradient 对象,参数值为两次圆的圆心和半径 |